<template>
	<view class="content util-page-height">
		<view class="uni-flex uni-column uni-common-mt util-full-height util-flex-mian-center">
			<uni-popup ref="popup" type="message">
				<uni-popup-message :type="popup.type" :message="popup.message" :duration="2000"></uni-popup-message>
			</uni-popup>
			<view class="header"></view>
			<view class="uni-common-mt main">
				<view class="uni-flex uni-column uni-common-mt">
					<label class="uni-flex uni-label">
						<text class="label-text">人员类型</text>
					</label>
					<radio-group class="uni-flex radio-group" name="radio" @change="onPersonTypeChanged">
						<label v-for="(item, index) in person.items" :key="item.value">
							<radio :value="String(item.value)" :checked="index === person.current" /><text>{{ item.text }}</text>
						</label>
					</radio-group>
				</view>
				<view class="uni-flex uni-column uni-common-mt">
					<label class="uni-flex uni-label">
						<text class="label-text">预约类型</text>
					</label>
					<radio-group class="uni-flex radio-group" name="radio" @change="onSubscribeTypeChanged">
						<label v-for="(item, index) in code.items" :key="item.value">
							<radio :value="String(item.value)" :checked="index === code.current" /><text>{{ item.text }}</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="uni-flex uni-row button-group footer">
				<button class="button" type="primary" :loading="inProcess" :disabled="inProcess" @click="onCreated">创建</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inProcess: false,
				community: "",
				person: {
					items: [
						{ text: "成人", value: 0 },
						{ text: "儿童", value: 1 }
					],
					current: 0
				},
				code: {
					items: [
						{ text: "有一码通", value: 1 },
						{ text: "无一码通", value: 2 }
					],
					current: 0
				},
				popup: {
					type: "success",
					message: "登陆成功"
				}
			}
		},
		onLoad() {
			
		},
		methods: {
			onPersonTypeChanged(e) {
				const value = e.detail.value;
				const index = this.person.items.findIndex(item => String(item.value) === value);
				this.person.current = index;
			},
			onSubscribeTypeChanged(e) {
				const value = e.detail.value;
				const index = this.code.items.findIndex(item => String(item.value) === value);
				this.code.current = index;
			},
			popupMessage(type, message) {
				this.popup.type = type;
				this.popup.message = message;
				this.$refs.popup.open("top");
			},
			executing() {
				this.inProcess = true;
			},
			completed() {
				this.inProcess = false;
			},
			async onCreated() {
				this.executing();
				const result = await this.$API.User.userBooking({
					stationId: this.stationId,
					bookingNumber: 1,
					userType: this.userType,
					hasCode: this.hasCode
				});
				this.completed();
				if (result && result.success) {
					this.$API.User.clearUserIdentifier();
					this.$API.User.clearRelationIdentifier();
					this.$API.User.setUserIdentifier(result.uid);
					this.$API.User.setRelationIdentifier(this.stationId, result.uid);
					uni.navigateTo({
						url: "./index"
					});
				} else {

				}
			}
		},
		computed: {
			stationId() {
				return this.$API.User.getListIdentifier();
			},
			userType() {
				return this.person.items[this.person.current].value;
			},
			hasCode() {
				return this.code.items[this.code.current].value;
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.header {
		flex: 1;
	}

    .main {
		flex: 5;
	}

    .footer {
		justify-content: space-around;
		flex: 3;
	}

	.button-group {
		justify-content: space-between;
	}
	
	.button {
		width: 100%;
		margin: 0;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
	}

	.radio-group {
		margin-top: 20rpx;
	}
</style>
